import { useMapStore } from '@/stores/map.js'
import { Point } from '@/Utils/Point-ES6.js'
import { storeToRefs } from 'pinia'
import { nextTick, ref } from 'vue'
import rode1 from '@/assets/videos/道路1.mp4'
import rode2 from '@/assets/videos/道路2.mp4'
import rode3 from '@/assets/videos/道路3.mp4'
import rode4 from '@/assets/videos/道路4.mp4'
let video_url = ref()
const { map } = storeToRefs(useMapStore())
const { queryPoint } = Point
export const usePopup = () => {
  let isShow = ref(false)
  let sceen_position = ref({})
  let rode_name = ref('')
  nextTick(() => {
    map.value.on('click', (e) => {
      let map_position = e.coordinate //地图坐标位置
      sceen_position.value.top = e.pixel[1] + 'px' //pop弹出坐标位置
      sceen_position.value.left = e.pixel[0] + 'px' //pop弹出坐标位置
      let service = {
        name: 'guanggu',
        layerId: 3,
      }
      let onSuccess = (res) => {
        if (res) {
          isShow.value = true
          rode_name.value = res[0].values_.values_.位置
          if (rode_name.value.includes('南湖大道')) {
            video_url.value = rode1
            return
          } else if (rode_name.value.includes('关山大道')) {
            video_url.value = rode2
            return
          } else if (rode_name.value.includes('光谷大道大道')) {
            video_url.value = rode3
            return
          } else {
            video_url.value = rode4
            return
          }
        }
      }
      queryPoint({
        position: map_position,
        service,
        callback: onSuccess,
      })
    })
  })

  return { isShow, sceen_position, rode_name, video_url }
}
